<template>
    <div v-if="shouldShowBreadcrumb" class="breadcrumb">
        <div class="layout">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="item.path">{{ item.name }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue'
const route = useRoute();
const router = useRouter()
// 计算面包屑列表
const breadcrumbList = computed(() => {
  const resolved = []
  let currentName = route.name
  
  while (currentName) {
    const routeRecord = router.getRoutes().find(route => route.name === currentName)
    
    if (routeRecord && routeRecord.meta && routeRecord.meta.title) {
      resolved.unshift({
        name: routeRecord.meta.title,
        path: routeRecord.path.startsWith('/') 
          ? routeRecord.path 
          : `/${routeRecord.path}`
      })
      
      // 检查是否有自定义parent
      currentName = routeRecord.meta.parent
    } else {
      break
    }
  }
  return resolved
})
// 判断是否显示面包屑
const shouldShowBreadcrumb = computed(() => {
  // 检查当前路由或其父路由是否需要隐藏面包屑
  return !route.matched.some(record => record.meta.hideBreadcrumb);
});
</script>

<style lang="scss" scoped>
    .breadcrumb {
        padding-top: px2rem(40);
    }
    @media (max-width:960px) {
        .breadcrumb {padding-top: 20px;}
    }
</style>